
<template>
<div>

<scroll class="content" ref="scroll">
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        </ul>
</scroll>
<back-top @click.native="backClick"></back-top>

  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll'
import  BackTop  from '@/components/content/backTop/BackTop'
export default {
  name: 'Category',

components:{
  Scroll,
BackTop,

},
methods: {

   backClick(){
    //  通过ref拿到组件,第一个scroll是ref="scroll"中的，第二个是Scroll组件中的data里面的scroll属性，
    // 这个属性对于就是 new BScroll 对象，该对象中有scrollTo(x,y,time)方法，直接可以回到顶部，
    // 该方法三个属性值，x,y坐标和time是回到顶部的时间
      this.$refs.scroll.scroll.scrollTo(0,0,300)


     },
},




}
</script>


<style scoped>
.content{
height: 300px;
background-color:pink;
/* overflow-y:scroll; */
/* overflow: hidden; */
}

</style>
